<template>
  <div class="monitor page-content" @mousemove="mousemove($event)" @mousedown="mousedown($event)"
    @mouseup="mouseup($event)" @dblclick="switchAutoplay">
    <!-- <div class="top-nav" @mouseenter="showHideNav('show')" @mouseleave="showHideNav('hide')">
      <transition name="el-zoom-in-top" v-if="showNav">
        <ul class="top-nav-list">
          <li v-for="(item, index) in banners" v-show="item.name" :class="{ 'active': carouselIndex == index }"
            :key="item.id">
            <span @click.stop="switchBanner(index)">{{ item.name }}</span>
          </li>
        </ul>
      </transition>
    </div> -->
    <el-carousel :initial-index="carouselIndex" ref="carousel" :interval="10000" @change="change" trigger="click"
      :autoplay="autoplay" @mouseenter.native="delHandleMouseEnter" @mousewheel="rollScroll($event)">
      <el-carousel-item v-for="item in banners" :key="item.id">
        <component v-bind:is="item.component" :banner="item" :current="banner" @change="switchBanner"></component>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
import Overview from "./Overview"
import Transport from "./Transport"
import Maintain from "./Maintain"
import Reservation from "./Reservation"
export default {
  components: {
    Overview,
    Transport,
    Maintain,
    Reservation,
  },
  data() {
    return {
      banners: [
        {
          id: "1",
          component: "Overview",
          name: "医辅服务平台监测",
        },
        {
          id: "2",
          component: "Transport",
          name: "中央运输系统监测",
        },
        {
          id: "3",
          component: "Reservation",
          name: "商城服务系统监测",
        },
        {
          id: "4",
          component: "Maintain",
          name: "中央派工系统监测",
        },
      ],
      banner: {},
      carouselIndex: 0,
      autoplay: false,
      timer: null,
      stopTime: 0,
      timeOut: null,
      moveTag: false,
      downX: 0,
      scrollLeft: 0,
      showNav: false,
      loading: false,
      query: {},
      timer: null,
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  created() {
    this.query = this.$route.query || {};
    this.carouselIndex = Number(this.query.index) || 0;
  },
  mounted() {
    this.change(this.carouselIndex);
    this.delHandleMouseEnter();
    setTimeout(this.keydown, 1000);
    // this.sartAutoplay();
    this.$bus.$on("Turn_Home", () => {
      this.switchBanner(0)
    })
  },
  beforeDestroy() {
    this.$bus.$off('Turn_Home');
  },
  methods: {
    showHideNav(type) {
      if (type == "show") {
        this.timer = setTimeout(() => {
          this.showNav = true;
        }, 500);
      }
      if (type == "hide") {
        this.showNav = false;
        clearTimeout(this.timer);
      }
    },
    change(index) {
      this.banner = this.banners[index];
      this.moveTag = false;
      this.carouselIndex = index;
      let query = this.func.depCopy(this.query);
      query.index = this.carouselIndex;
      this.$router.replace({ path: this.$route.path, query, });
      this.query = this.$route.query || {};
    },
    stopAutoplay() {
      this.autoplay = false;
      this.stopTime = new Date().getTime();
    },
    switchAutoplay() {
      if (this.banners.length <= 1) {
        return;
      }
      this.autoplay = !this.autoplay;
      this.$message({
        message: this.autoplay ? "已开启自动切换，如需关闭请双击屏幕或使用空格键" : "已关闭自动切换，如需开启请双击屏幕或使用空格键",
        center: true,
        duration: 1500,
        offset: 100,
        customClass: "toast-message"
      });
      if (this.autoplay) {
        this.sartAutoplay();
      } else {
        clearInterval(this.timer);
      }
    },
    sartAutoplay() {
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        var now = new Date().getTime();
        if (now > this.stopTime + 3000) {
          this.autoplay = true;
        }
      }, 1000)
    },
    delHandleMouseEnter() {
      this.$refs.carousel.handleMouseEnter = () => { };
    },
    rollScroll(event) {
      let scrollVal = event.wheelDelta || event.detail;
      // 节流
      if (!this.timeOut) {
        this.timeOut = setTimeout(() => {
          this.timeOut = null;
          scrollVal > 0
            ? this.$refs.carousel.prev()
            : this.$refs.carousel.next();
        }, 300);
      }
    },
    keydown() {
      document.onkeydown = (event) => {
        if (event.which == 37) {
          this.$refs.carousel.prev()
        } else if (event.which == 39) {
          this.$refs.carousel.next();
        } else if (event.which == 32) {
          this.switchAutoplay();
        }
      }
    },
    mousedown(event) {
      this.moveTag = true;
      this.downX = event.clientX; // 获取到点击的x下标
      this.scrollLeft = this.scrollLeft; // 获取当前元素滚动条的偏移量
      setTimeout(this.mouseup, 200);
    },
    mouseup() {
      this.moveTag = false;
      this.downX = 0;
      this.scrollLeft = 0;
    },
    mousemove(event) {
      this.stopAutoplay();
      if (this.moveTag) {
        // 当前移动的x轴下标减去刚点击下去的x轴下标得到鼠标滑动距离
        var scrollX = event.clientX - this.downX;
        // 鼠标按下的滚动条偏移量减去当前鼠标的滑动距离
        this.scrollLeft = this.scrollLeft - scrollX;
        if (scrollX < -200) {
          this.$refs.carousel.next();
        }
        if (scrollX > 200) {
          this.$refs.carousel.prev();
        }
      }
    },
    switchBanner(index) {
      this.$refs.carousel.setActiveItem(index);
      this.carouselIndex = index;
      if (this.autoplay) {
        this.switchAutoplay();
      }
    }
  },
}
</script>
<style lang="scss">
.monitor {
  .top-nav {
    height: 20px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;

    .top-nav-list {
      background-color: rgba(255, 255, 255, 0.1);
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
      position: fixed;
      top: 0;
      left: 0px;
      right: 0px;
      padding: 0 5px;
      text-align: center;

      li {
        text-align: center;
        display: inline-block;
        padding: 1.1vh 5px;

        span {
          font-size: 0.7vw;
          display: inline-block;
          height: 3vh;
          line-height: 3vh;
          padding: 0 10px;
          border-radius: 2px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          max-width: 100%;
          background-color: transparent;
          color: #fff;

          &:hover {
            cursor: pointer;
            opacity: 0.9;
          }
        }

        &:last-child {
          margin-right: 0;
        }

        &.active {
          span {
            background-color: rgba(0, 0, 0, 0.3);
            color: #fff;
          }
        }
      }
    }
  }

  .el-carousel {
    height: 100%;
  }

  .el-carousel__container {
    height: 100%;
  }

  .el-carousel__item {
    height: 100%;

    &>img {
      width: 100%;
      height: 100%;
    }
  }

  .el-carousel__arrow {
    display: none;
  }

  .el-carousel__indicator--horizontal {
    padding: 10px 4px 10px;
    display: none;
  }
}
</style>